<template>
  <div class="user-manage-page">
    <div class="content-wrapper">
      <div class="header-section">
        <h2 class="page-title">用户管理</h2>
      </div>
      <!-- 搜索筛选区域 -->
      <div class="search-section">
        <div class="search-row">
          <div class="search-inputs">
            <div class="search-item">
              <span class="search-label">用户名:</span>
              <a-input v-model="searchForm.username" placeholder="请输入用户名" :style="{width: '140px'}"/>
            </div>
            <div class="search-item">
              <span class="search-label">昵称:</span>
              <a-input v-model="searchForm.nickname" placeholder="请输入昵称" :style="{width: '140px'}"/>
            </div>
            <div class="search-item">
              <span class="search-label">电话:</span>
              <a-input v-model="searchForm.phone" placeholder="请输入电话" :style="{width: '120px'}"/>
            </div>

            <div class="search-item">
              <span class="search-label">邮箱:</span>
              <a-input v-model="searchForm.email" placeholder="请输入邮箱"/>
            </div>
            <div class="search-item">
              <span class="search-label">状态:</span>
              <a-select v-model="searchForm.status" placeholder="请选择状态" allow-clear
                        :style="{width: '140px'}">
                <a-option value="1">正常</a-option>
                <a-option value="0">禁用</a-option>
              </a-select>
            </div>
          </div>
          <div class="search-buttons">
            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button class="refresh-btn" @click="handleReset">
              <template #icon>
                <icon-refresh/>
              </template>
              重置
            </a-button>
          </div>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table-section">
        <a-table
            row-key="id"
            :columns="columns"
            :data="tableData"
            :pagination="pagination"
            @page-change="onPageChange"
        >

          <!-- 图片列 -->
          <template #image="{ record }">
            <div class="image-preview">
              <img :src="record.avatar" :alt="record.picName"/>
            </div>
          </template>

          <!--          状态列-->
          <template #status="{record}">
            <a-tooltip v-if="record.status===1" content="正常" position="right" mini background-color="grey">
              <a-badge status="success"/>
            </a-tooltip>
            <a-tooltip v-else content="禁用" position="right" mini background-color="grey">
              <a-badge status="danger"/>
            </a-tooltip>

          </template>

          <!-- 创建时间列 -->
          <template #createTime="{ record }">
            <div>{{ formatTime(record.createTime, "YYYY-MM-DD") }}</div>
          </template>

          <!-- 创建时间列 -->
          <template #operation="{ record }">
            <a-button v-if="record.status===1" type="primary" status="danger" size="small"
                      @click="banOrUnbanUser(record)">禁用
            </a-button>
            <a-button v-else type="text" status="normal"
                      @click="banOrUnbanUser(record)">解封
            </a-button>
          </template>

        </a-table>
      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {banUserRequestByPost, pageQueryUserListByGet, unbanUserRequestByPost} from "../service/userRequest";
import type {UpdateRequest, UserPageQueryRequest, UserVo} from "../service/typing";
import {Message, TableColumn} from "@arco-design/web-vue";
import {formatTime} from "../utils";


const searchForm = reactive({
  username: '',
  nickname: '',
  phone: '',
  email: '',
  status: ''
});


const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showPageSize: true,
});

const tableData = ref<UserVo[]>([])

const columns: TableColumn[] = [
  {
    title: 'id',
    dataIndex: 'id',
    slotName: 'id',
    width: 190,
  },
  {
    title: '用户名',
    dataIndex: 'username',
    slotName: 'username',
    width: 150,
  },
  {
    title: '昵称',
    dataIndex: 'nickname',
    slotName: 'nickname',
    width: 150,
  },
  {
    title: '头像',
    slotName: 'image',
    width: 120,
  },
  {
    title: '电话',
    dataIndex: 'phone',
    slotName: 'phone',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    slotName: 'email',
    width: 200
  },
  {
    title: "状态",
    dataIndex: "status",
    slotName: "status"
  },
  {
    title: "注册时间",
    dataIndex: "createTime",
    slotName: "createTime"
  },
  {
    title: "操作",
    dataIndex: "operation",
    slotName: "operation"
  },

]

const fetchUserList = async () => {
  // @ts-ignore
  const userPageQueryRequest = {
    username: searchForm.username,
    nickname: searchForm.nickname,
    phone: searchForm.phone,
    email: searchForm.email,
    status:searchForm.status,
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    sortField: 'create_time',
    sort: "descend",
  } as UserPageQueryRequest

  const res = await pageQueryUserListByGet(userPageQueryRequest);
  if (res.code !== 200) {
    Message.error("获取用户列表失败")
  }
  tableData.value = res.data.data
  // 设置总数
  pagination.total = res.data.total;
}

// 页码变化
const onPageChange = (page: number) => {
  pagination.current = page;
  fetchUserList();
};

// 搜索处理
const handleSearch = () => {
  pagination.current = 1;
  fetchUserList();
};

// 重置
const handleReset = () => {
  searchForm.username = ''
  searchForm.nickname = ''
  searchForm.phone = ''
  searchForm.email = ''
  searchForm.status = ''
  fetchUserList()
}

const banOrUnbanUser = async (record: UserVo) => {
  let res;
  const updateRequest = {
    id: record.id
  } as UpdateRequest
  if (record.status == 1) {
    res = await banUserRequestByPost(updateRequest)
  } else {
    res = await unbanUserRequestByPost(updateRequest)
  }
  if (res.code != 200) {
    Message.error("操作失败")
    return
  }
  await fetchUserList()
}

onMounted(() => {
  fetchUserList()
})

</script>

<style scoped>
.user-manage-page {
  padding: 16px;
  background-color: #ffffff;
  min-height: 100vh;
}

.content-wrapper {
  width: 100%;
  position: relative;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: #1d2129;
}

.table-section {
  background: #fff;
  padding: 0;
  overflow: hidden;
}

.image-preview {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #e5e6eb;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.search-section {
  margin-bottom: 20px;
}

.search-row {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.search-inputs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: calc(100% - 190px);
  overflow-x: auto;
}

.search-buttons {
  position: absolute;
  right: 0;
  display: flex;
  gap: 8px;
}

.search-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.search-label {
  margin-right: 8px;
  white-space: nowrap;
  color: #1d2129;
  font-size: 14px;
}

.search-item :deep(.arco-input),
.search-item :deep(.arco-select) {
  width: 180px;
}


</style>